import React, { Component } from 'react'
import { connect } from 'react-redux'
import { dataset as datasetDuck } from 'ducks'
import PropTypes from 'prop-types'
import { Section } from 'components/paddingGrid'
import {
  Grid, Header, Table, Form, Checkbox, Input, Label, Dropdown,
} from 'semantic-ui-react'
import Styled from 'styled-components'
import { BasicButton, PrimaryButton, SwitchButtons } from 'components/Button'

const SectionRow = Styled.div`
  margin-bottom: 1em;
`
class DatasetConfig extends Component {
  static propTypes = {
    actionSetActiveTab: PropTypes.func.isRequired,
  }

  componentDidMount = () => {
    const { actionSetActiveTab } = this.props
    actionSetActiveTab('config')
  }

  render() {
    return (
      <Grid>
        <Grid.Row>
          <Grid.Column>
            <Section>
              <Header as="h3" dividing>
                基本设置
              </Header>
              <Table basic="very" size="large">
                <Table.Body>
                  <Table.Row>
                    <Table.Cell width="4" verticalAlign="top">
                      数据集名称
                    </Table.Cell>
                    <Table.Cell>
                      <SectionRow>
                        存储空间名称由 4 ~ 63 个字符组成 ，可包含 字母、数字、中划线。
                      </SectionRow>
                      <SectionRow>
                        <Form>
                          <Form.Field inline>
                            <input />
                          </Form.Field>
                        </Form>
                      </SectionRow>
                      <SectionRow>
                        <BasicButton content="取消" />
                        <PrimaryButton content="保存" primary />
                      </SectionRow>
                    </Table.Cell>
                  </Table.Row>
                  <Table.Row>
                    <Table.Cell width="4" verticalAlign="top">
                      访问控制
                    </Table.Cell>
                    <Table.Cell>
                      <SectionRow>
                        公开的数据集可以被任何人查看，私有的数据集只有指定的用户可以访问
                      </SectionRow>
                      <SectionRow>
                        <SwitchButtons
                          ops={[
                            { name: 'public', value: '公开' },
                            { name: 'private', value: '私有' },
                          ]}
                        />
                      </SectionRow>
                      <SectionRow>
                        <BasicButton content="取消" />
                        <PrimaryButton content="保存" primary />
                      </SectionRow>
                    </Table.Cell>
                  </Table.Row>
                </Table.Body>
              </Table>
            </Section>
            <Section>
              <Header as="h3" dividing>
                上传设置
              </Header>
              <Table basic="very" size="large">
                <Table.Body>
                  <Table.Row>
                    <Table.Cell width="4">文件格式</Table.Cell>
                    <Table.Cell>
                      <SectionRow>设置上传时允许的文件格式</SectionRow>
                      <SectionRow>
                        <Checkbox toggle label="JPG" />
                      </SectionRow>
                      <SectionRow>
                        <Checkbox toggle label="PNG" />
                      </SectionRow>
                      <SectionRow>
                        <Checkbox toggle label="GIF" />
                      </SectionRow>
                      <SectionRow>
                        <Checkbox toggle label="BMP" />
                      </SectionRow>
                      <SectionRow>
                        <BasicButton content="取消" />
                        <PrimaryButton content="保存" primary />
                      </SectionRow>
                    </Table.Cell>
                  </Table.Row>
                </Table.Body>
              </Table>
            </Section>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    )
  }
}

const mapDispatchToProps = {
  actionSetActiveTab: datasetDuck.creators.actionSetActiveTab,
}

export default connect(
  null,
  mapDispatchToProps,
)(DatasetConfig)
